<template>
  <div class="add-templ mine-shop">
    <!-- 1.0 模板设置 -->
    <el-form ref="addStoreRef" :model="addStroreForm" :rules="addStroreFormRules">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="店铺信息" name="1">
          <el-form-item label="平台" prop="ptTypeId">
            <el-select v-model="addStroreForm.ptTypeId" placeholder="请选择" size="mini">
              <el-option
                v-for="item in platsList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="首页链接" prop="storeUrl">
            <el-input
              v-model="addStroreForm.storeUrl"
              type="text"
              placeholder="*请输入宝贝链接"
              size="mini"
            ></el-input>
          </el-form-item>
          <el-form-item label="首页截图" prop="storeSyjt">
            <el-upload
              class="upload-demo"
              action="http://106.53.45.41:9509/qiniu/fileupload?prefix=seller"
              :on-success="successPic"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :limit="3"
              :on-exceed="handleExceed"
            >
              <el-button size="mini" type="primary" style="transform: translateY(2px);">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">* 请复制主图链接或上传主图</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="店名/昵称" prop="storeName">
            <el-input
              v-model="addStroreForm.storeName"
              type="text"
              placeholder="*请输入店铺名称/账号昵称"
              size="mini"
            ></el-input>
          </el-form-item>
          <el-form-item label="店账号/ID" prop="storeDpzh">
            <el-input
              v-model="addStroreForm.storeDpzh"
              type="text"
              placeholder="*请输入店铺名称/账号昵称"
              size="mini"
            ></el-input>
          </el-form-item>
          <el-form-item label="主营类目" prop="storeZylm">
            <el-input
              v-model="addStroreForm.storeZylm"
              type="text"
              placeholder="*请输入店铺主营类目"
              size="mini"
            ></el-input>
          </el-form-item>
          <el-form-item label="标记">
            <el-input
              v-model="addStroreForm.storeFlag"
              type="text"
              placeholder="请输入您对此店铺的专属标记吧，如：xx商家"
              size="mini"
            ></el-input>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="店铺设置" name="2" class="choose-address">
          <el-form-item label="派单方式" prop="storeOrSellerFlag">
            <el-select v-model="addStroreForm.storeOrSellerFlag" size="mini">
              <el-option label="店铺分配" value="1"></el-option>
              <el-option label="账号" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="复购时间(天)">
            <el-input v-model="addStroreForm.storeFgsj" type="number" placeholder="30" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="发货地" prop="storeFahuodi">
            <area-cascader v-model="addStroreForm.storeFahuodi" type="all" :level="1" :data="pcaa"></area-cascader>
          </el-form-item>
          <el-form-item label="发货地址" prop="storeAddress">
            <el-input
              v-model="addStroreForm.storeAddress"
              type="text"
              placeholder="*请输入发货街道详细地址"
              size="mini"
            ></el-input>
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <div class="submit-templ">
      <el-button type="success" size="mini" @click="addStore">保 存</el-button>
    </div>
  </div>
</template>

<script>
import { pca, pcaa } from 'area-data'
export default {
  data() {
    return {
      activeNames: ['1', '2'],
      // 平台选择
      platsList: [],
      pca,
      pcaa,

      addStroreForm: {
        // 平台选择
        ptTypeId: '',
        storeUrl: '',
        storeName: '',
        storeDpzh: '',
        storeZylm: '',
        storeFlag: '',
        storeSyjt: '',
        storeFgsj: 0,
        storeType: 1,
        // 分配方式
        storeOrSellerFlag: 1,
        storeFahuodi: [],
        storeAddress: ''
      },
      addStroreFormRules: {
        ptTypeId: [{ required: true, message: '请输入平台', trigger: 'blur' }],
        storeUrl: [
          { required: true, message: '请输入首页链接', trigger: 'blur' }
        ],
        storeName: [
          { required: true, message: '请输入店铺名称', trigger: 'blur' }
        ],
        storeDpzh: [
          { required: true, message: '请输入店铺账号', trigger: 'blur' }
        ],
        storeZylm: [
          { required: true, message: '请输入主营类目', trigger: 'blur' }
        ],
        storeFahuodi: [
          { required: true, message: '请选择发货地区', trigger: 'blur' }
        ],
        storeAddress: [
          { required: true, message: '请输入发货地址', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getPlat()
  },
  methods: {
    async getPlat() {
      const { data } = await this._axios.get('/pttype/findallenable')
      data.forEach((item) => {
        this.platsList.push({
          value: item.ptTypeId,
          label: item.ptTypeName,
          url: item.ptLogoUrl
        })
      })
    },
    successPic(response, file, fileList) {
      // console.log(response)
      // 文件上传成功后，保存首页截图
      this.addStroreForm.storeSyjt = response.resultObj.rootUrl
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      )
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    addStore() {
      // 把选择的地址修改为字符串
      let str = ''
      let arrabc = this.addStroreForm.storeFahuodi
      arrabc = Array.isArray(arrabc) ? arrabc : []
      console.log(arrabc)
      arrabc.forEach((item) => {
        for (var k in item) {
          str += item[k]
        }
      })
      this.addStroreForm.storeFahuodi = str
      this.addStroreForm.storeFgsj = parseInt(this.addStroreForm.storeFgsj)
      this.addStroreForm.storeOrSellerFlag = parseInt(
        this.addStroreForm.storeOrSellerFlag
      )

      if (this.addStroreForm.storeSyjt === '') {
        this.$message({
          message: '请上传首页截图',
          type: 'warning'
        })
        return
      }
      // 添加店铺的请求
      this.$refs.addStoreRef.validate(async (valid) => {
        if (!valid) {
          this.$message({
            message: '请填入必填参数',
            type: 'error'
          })
          return
        }
        const { data } = await this._axios.post(
          '/store/savestore',
          this.addStroreForm
        )
        console.log(data)
        if (!data.success) {
          this.$message({
            message: data.message,
            type: 'error'
          })
          return
        }
        this.$message({
          message: data.message,
          type: 'success'
        })
        // this.$refs.addStoreRef.resetFields()
        location.reload()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.add-templ {
  height: 100%;
  padding: 10px;

  h3 {
    color: #fff;
    line-height: 24px;
    font-size: 14px;
    text-align: center;
    background-color: #03a9f4;
  }

  .el-form-item {
    border-bottom: 1px solid #e4e4e4;
    display: flex;
    margin: 0;
  }

  sub {
    position: relative;
    top: -6px;
  }
}

.el-collapse {
  border-top: none;
}

.upload-demo {
  width: 100% !important;
  text-align: center;

  .el-button {
    display: block;
    margin: 0 auto;
    padding: 4px 6px;
  }
  div {
    margin: 0;
  }
}

.el-form {
  border-left: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
}

.style-in {
  .el-select {
    margin-bottom: 10px;
  }
}

.submit-templ {
  width: 100%;
  height: 35px;
  padding-top: 10px;

  .el-button {
    width: 100%;
    height: 35px;
  }
}
</style>
